<script>
  export default {
    name:'home',

  }
</script>

<template>
  <div class="lay-out">
    <div class="nav-side">
      <span>我是侧边栏</span>
    </div>
    <div class="content">
      <div class="content-header">
        <span>首页</span>
        <span>用户</span>
      </div>
      <div class="content-wrapper">
        <div class="main-page">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.lay-out{
  width:100vh;
  height:100vh;
  .nav-side{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width: 200px;
    background-color: aquamarine;
    color:#fff;
    transition: width .5s;
  }
  .content{
    margin-left:200px;
    .content-header{
      height:50px;
      line-height:50px;
      display: flex;
      padding:0 20px;
      justify-content: space-between;
      border-bottom:1px solid #fff;
      background-color: cadetblue;
    }
    .content-wrapper{
      background-color: cornflowerblue;
      padding:20px;
      height:calc(100vh - 51px);
      .main-page{
        background-color: #fff;
        height: 100%;;
      }
    }
  }
}
</style>
